<template>
  <!-- 校园动态管理 -->
<div class="root">

  <div class="cha">

    <div class="input1">
      <el-input v-model="obj.idortitle" placeholder="请输入查询内容" />
    </div>

    <!-- 按钮 -->
    <div>
      <el-button type="primary" @click="about">查询</el-button>
      <el-button type="success" @click="tianjia">添加</el-button>
      <el-button type="danger" @click="delAll">批量删除</el-button>
    </div>

  </div>

  <!-- 表格 -->
  <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" border class="tab"
    @selection-change="handleSelectionChange">
    <el-table-column type="selection" align="center" width="55" />
    <el-table-column property="title" align="center" label="标题" width="400" />
    <el-table-column property="author" align="center" label="作者" width="120" />
    <el-table-column property="keywords" align="center" label="关键字" width="400" show-overflow-tooltip />
  
    <el-table-column label="操作" align="center">
      
      <template #default="scope">
          <el-button type="success" @click="xiugai(scope.row)">修改</el-button>
          <el-popconfirm title="请问您确认删除此条信息吗?" @confirm="del(scope.row.news_id)">
            <template #reference>
              <el-button>删除</el-button>
            </template>
          </el-popconfirm>
          <el-button type="info" @click="xiangqing(scope.row)">详情</el-button>
      </template>

    </el-table-column>
  </el-table>

  <FenYe :total="totals" @getChildData='getChildData'></FenYe>

  
</div>
</template>

<script setup lang='ts'>
import { ref,reactive } from 'vue';
import { ElMessage } from "element-plus";
import {news,delli} from '../../api/login/index'  //接口
import FenYe from '../../components/fen ye/FenYe.vue' //封装的分页
import router from "../../router/router";// 路由跳转


// 列表数据
let tableData:any = reactive([])
let totals =ref(0)  // 一共多少条数据
let obj = reactive({  //参数
  page:'1',
  pageSize:'10',
  idortitle:''  //查询要的
})
let getList = async () => { //接口
  let res:any = await news(obj)
  console.log(res);
  tableData.length = 0  //防止往下追加
  tableData.push(...res.data)
  // 一共多少条数据
  totals.value = res.total
}
getList()


// 分页
const getChildData = (val:any) => {
  console.log(111, val)
  obj.page = val.page
  obj.pageSize = val.pageSize
  getList()
}


// 查询
let about = () =>{
  getList()
}

// 单删
const del = async (id:number) =>{
  // console.log(id);
  const obj2 = {
    news_id:id
  }
  const res:any = await delli(obj2)
  console.log(res);
  if(res.code === '00000'){
    getList() //刷新
    ElMessage({
      message: "删除成功",
      type: "success",
    });
  }
}


// 批删 点击多选框获取到id
let multipleSelection:any = ref([])
const handleSelectionChange = (val: any) => {
  // 处理数据 获取到选中的id
  multipleSelection.value = val.map((item:any) => item.news_id)
  console.log(multipleSelection.value)
}
// 批删 接口
let delAll = () =>{
  let ids = []
  ids = multipleSelection.value //获取到选中的id
  let res :any = delli({id:ids})
  console.log(res);
  if(res.code==='00000'){
    getList() //刷新
    ElMessage({
      message: "删除成功",
      type: "success",
    });
  }else{
    ElMessage({
      message: "请先选择你要批量删除的数据",
      type: "error",
    });
  }
}


// 添加
let  tianjia = () =>{
  router.push('tianjia')
}


// 修改
let xiugai = (data:any) =>{
  let {title,thumb,news_id,keywords,content,author,add_time} = data
  router.push({path:'sxiugai', query: {title,thumb,news_id,keywords,content,author,add_time}})
}


// 详情
let xiangqing = (data:any) =>{
  let {title,thumb,news_id,keywords,content,author,add_time} = data
  router.push({path:'sxiangqing', query: {title,thumb,news_id,keywords,content,author,add_time}})
}



</script>

<style scoped lang='less'>
  .input1{
    width: 230px;
    margin-right: 20px;
  }
  .cha{
    display: flex;
    margin-bottom: 23px;
  }
</style>